<template>
  <div class="smart-tools">
    <h2 class="section-title">智能工具</h2>
    <div class="tools-grid">
      <!-- 病历HTML提取工具 -->
      <el-card class="tool-card" shadow="hover">
        <div class="tool-icon">
          <el-icon><document /></el-icon>
        </div>
        <h3 class="tool-title">病历HTML提取</h3>
        <p class="tool-desc">将病历HTML内容提取为结构化JSON</p>
        <el-button type="primary" @click="$router.push('/tools/html-extract')">使用工具</el-button>
      </el-card>
      
      <!-- 病历模板处理工具 - 新增 -->
      <el-card class="tool-card" shadow="hover">
        <div class="tool-icon highlight">
          <el-icon><operation /></el-icon>
        </div>
        <div class="new-badge">新</div>
        <h3 class="tool-title">病历模板处理</h3>
        <p class="tool-desc">病历提取键结构，匹配模板，生成JSON</p>
        <el-button type="primary" @click="$router.push('/tools/template-process')">使用工具</el-button>
      </el-card>
      
      <!-- 可添加更多工具卡片 -->
    </div>
  </div>
</template>

<script>
import { Document, Operation } from '@element-plus/icons-vue'

export default {
  name: 'SmartTools',
  components: {
    Document,
    Operation
  }
}
</script>

<style scoped>
.smart-tools {
  padding: 20px;
}

.section-title {
  font-size: 24px;
  margin-bottom: 20px;
  color: #303133;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.tool-card {
  position: relative;
  text-align: center;
  padding: 20px;
}

.tool-icon {
  font-size: 48px;
  margin-bottom: 16px;
  color: #409EFF;
}

.tool-icon.highlight {
  color: #67C23A;
}

.tool-title {
  font-size: 18px;
  margin-bottom: 12px;
  color: #303133;
}

.tool-desc {
  font-size: 14px;
  margin-bottom: 20px;
  color: #606266;
  height: 40px;
}

.new-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #F56C6C;
  color: white;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
}
</style> 